<template>
	
	<view>
	<view class="frame">
		<u-button type="primary" text="录入维修" style="width: 50%;" @click="goRepair"></u-button>
	</view>
	<view style="background-color: #FFFFFF;">
	  <u-cell-group
	      :border="false">
	    <u-cell
	        :titleStyle="{'font-size':'38rpx'}"
	        size="large"
	        title="报修列表"
	    ></u-cell>
	  </u-cell-group>
	  <view class="repairList" v-for="(item,index) in list" :key="index" @click="goDetail(item.id)" >
	    <text class="cont1">{{item.create_time}}</text>
	    <span class="cont">{{item.content}}</span>
	    <!-- <u-tag text="维修中" v-if="item.status == 1"  size="mini" type="warning" shape="circle"></u-tag> -->
		<u-tag text="已处理" size="mini" v-if="item.status == 2" type="success" shape="circle"></u-tag>
		<u-tag text="已处理" size="mini" v-if="item.status == 3" type="info" shape="circle"></u-tag>
		<u-tag text="待处理" size="mini" v-if="item.status == 1" type="primary" shape="circle"></u-tag>
	  </view>
</view>
</view>
</template>

<script>
	import Api from '@/util/api.js'
	export default {
		data() {
			return {
				userInfo:null,			//用户信息
				list:[],				//报修列表
			};
		},
		onShow(){
			var that = this
			that.checkUser()
			that.getRepairReocrd()
		},
		methods:{
			goRepair(){
				console.log('去录入报修')
				uni.navigateTo({
					url:'../repair/repair?type=6'
				})
			},
			// 检查用户信息
			checkUser(){
				var that  = this
				var userInfo = that.userInfo;
					if(localStorage.getItem('userInfo')){
						that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}else{
						uni.showToast({
						    icon: 'none',   
						    duration: 3000,
						    title: "当前用户未登录"
						});
						return;
					}
			},
			
			// 查看维修详情
			goDetail(id){
				var that = this
				uni.navigateTo({
					url:'./repair_detail?id=' + id
				})
			},
			// 获取用户全部缴费记录
			getRepairReocrd(){
				var that = this
				var data = {
					repair_user_id:that.userInfo.id
				}
				Api.getRepairReocrd(data).then(res=>{
					console.log('获取成功',res)
					that.list = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.frame{
		// top: 0px;
		height: 100rpx;
		width: 100%;
		// position: fixed;
		display: flex;
		background-color: white;
	}
	.repairList {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		align-items: center;
	}
	.cont1{
		width: 27%;
		overflow:hidden;/*内容超出后隐藏*/
		// text-overflow:ellipsis;/*超出内容显示为省略号*/
		white-space:nowrap;/*文本不进行换行*/
	}
	.cont{
		width: 33%;
		overflow:hidden;/*内容超出后隐藏*/
		text-overflow:ellipsis;/*超出内容显示为省略号*/
		white-space:nowrap;/*文本不进行换行*/
	}
</style>
